<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS动态效果展示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        header {
            text-align: center;
            padding: 25px;
            background: linear-gradient(90deg, #3498db, #2c3e50);
            color: white;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .content {
            display: flex;
            min-height: 500px;
        }
        
        .code-panel {
            flex: 1;
            background: #2d3436;
            color: #f5f6fa;
            padding: 20px;
            display: flex;
            flex-direction: column;
        }
        
        .preview-panel {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            background: #f8f9fa;
            border-left: 1px solid #ddd;
        }
        
        .panel-header {
            padding: 10px 0;
            margin-bottom: 15px;
            border-bottom: 2px solid #3498db;
            font-size: 1.4rem;
            color: #2c3e50;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .code-container {
            background: #1e272e;
            border-radius: 8px;
            padding: 20px;
            flex-grow: 1;
            overflow-y: auto;
        }
        
        .preview-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            flex-grow: 1;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: all 0.5s ease;
        }
        
        .html-code, .css-code {
            font-family: 'Fira Code', monospace;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .html-tag {
            color: #e74c3c;
        }
        
        .html-attr {
            color: #f39c12;
        }
        
        .html-content {
            color: #3498db;
        }
        
        .css-selector {
            color: #05c46b;
        }
        
        .css-property {
            color: #0fbcf9;
        }
        
        .css-value {
            color: #f53b57;
        }
        
        .hidden {
            display: none;
        }
        
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px;
        }
        
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-remove {
            background: #e74c3c;
        }
        
        .btn-remove:hover {
            background: #c0392b;
        }
        
        .btn-disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        
        .btn-disabled:hover {
            background: #95a5a6;
            transform: none;
            box-shadow: none;
        }
        
        .explanation {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            border-left: 4px solid #3498db;
        }
        
        .step-indicator {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .step {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            margin: 0 5px;
        }
        
        .step-active {
            background: #3498db;
        }
        
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .preview-panel {
                border-left: none;
                border-top: 1px solid #ddd;
            }
            
            .btn-container {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>CSS动态效果展示</h1>
            <p class="subtitle">通过交互方式学习CSS如何改变网页外观</p>
        </header>
        
        <div class="content">
            <div class="code-panel">
                <div class="panel-header">
                    <span>代码编辑器</span>
                </div>
                <div class="code-container">
                    <div class="html-code">
                        <span class="html-tag">&lt;!DOCTYPE html&gt;</span><br>
                        <span class="html-tag">&lt;html lang="zh-CN"&gt;</span><br>
                        <span class="html-tag">&lt;head&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;title&gt;</span><span class="html-content">网页标题</span><span class="html-tag">&lt;/title&gt;</span><br>
                        <span class="html-tag">&lt;/head&gt;</span><br>
                        <span class="html-tag">&lt;/html&gt;</span><br>
                        <span class="html-tag">&lt;body&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;h1&gt;</span><span class="html-content">这是一个一级标题</span><span class="html-tag">&lt;/h1&gt;</span><br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="html-tag">&lt;p&gt;</span><span class="html-content">这是一个段落文本。</span><span class="html-tag">&lt;/p&gt;</span><br>
                        <span class="html-tag">&lt;/body&gt;</span><br>
                        <span class="html-tag">&lt;/html&gt;</span>
                    </div>
                    
                    <div id="cssCode" class="css-code hidden">
                        <span class="css-selector">body</span> {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="css-property">background-color</span>: <span class="css-value">skyblue</span>;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="css-property">font-family</span>: <span class="css-value">"Microsoft YaHei", sans-serif</span>;<br>
                        }<br><br>
                        
                        <span class="css-selector">h1</span> {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="css-property">color</span>: <span class="css-value">darkblue</span>;<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="css-property">text-align</span>: <span class="css-value">center</span>;<br>
                        }
                    </div>
                </div>
                
                <div class="btn-container">
                    <button id="addCssBtn" class="btn">添加CSS样式</button>
                    <button id="removeCssBtn" class="btn btn-remove btn-disabled">移除CSS样式</button>
                </div>
                
                <div class="step-indicator">
                    <div class="step step-active"></div>
                    <div class="step"></div>
                </div>
            </div>
            
            <div class="preview-panel">
                <div class="panel-header">
                    <span>实时预览</span>
                </div>
                <div class="preview-container" id="preview">
                    <h1>这是一个一级标题</h1>
                    <p>这是一个段落文本。</p>
                </div>
                
                <div class="explanation">
                    <p><strong>当前状态：</strong> <span id="statusText">未添加CSS样式</span></p>
                    <p id="explanationText">点击"添加CSS样式"按钮，查看CSS如何改变网页外观。</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const addCssBtn = document.getElementById('addCssBtn');
            const removeCssBtn = document.getElementById('removeCssBtn');
            const cssCode = document.getElementById('cssCode');
            const preview = document.getElementById('preview');
            const statusText = document.getElementById('statusText');
            const explanationText = document.getElementById('explanationText');
            const steps = document.querySelectorAll('.step');
            
            let cssApplied = false;
            
            // 保存原始样式，以便移除时恢复
            const originalStyles = {
                backgroundColor: preview.style.backgroundColor,
                fontFamily: preview.style.fontFamily,
                h1Color: preview.querySelector('h1').style.color,
                h1TextAlign: preview.querySelector('h1').style.textAlign
            };
            
            addCssBtn.addEventListener('click', function() {
                if (!cssApplied) {
                    applyCssStyles();
                }
            });
            
            removeCssBtn.addEventListener('click', function() {
                if (cssApplied) {
                    removeCssStyles();
                }
            });
            
            function applyCssStyles() {
                // 显示CSS代码
                cssCode.classList.remove('hidden');
                
                // 应用CSS样式到预览区域
                preview.style.backgroundColor = 'skyblue';
                preview.style.fontFamily = '"Microsoft YaHei", sans-serif';
                
                const h1 = preview.querySelector('h1');
                h1.style.color = 'darkblue';
                h1.style.textAlign = 'center';
                
                // 更新状态文本
                statusText.textContent = '已添加CSS样式';
                explanationText.innerHTML = '<strong>已应用以下样式：</strong><br>' +
                                            '- 天蓝色背景<br>' +
                                            '- 微软雅黑字体<br>' +
                                            '- 深蓝色标题<br>' +
                                            '- 标题居中效果';
                
                // 更新按钮状态
                addCssBtn.classList.add('btn-disabled');
                removeCssBtn.classList.remove('btn-disabled');
                
                // 更新步骤指示器
                steps[1].classList.add('step-active');
                
                cssApplied = true;
            }
            
            function removeCssStyles() {
                // 隐藏CSS代码
                cssCode.classList.add('hidden');
                
                // 恢复原始样式
                preview.style.backgroundColor = originalStyles.backgroundColor;
                preview.style.fontFamily = originalStyles.fontFamily;
                
                const h1 = preview.querySelector('h1');
                h1.style.color = originalStyles.h1Color;
                h1.style.textAlign = originalStyles.h1TextAlign;
                
                // 更新状态文本
                statusText.textContent = '未添加CSS样式';
                explanationText.innerHTML = '点击"添加CSS样式"按钮，查看CSS如何改变网页外观。';
                
                // 更新按钮状态
                addCssBtn.classList.remove('btn-disabled');
                removeCssBtn.classList.add('btn-disabled');
                
                // 更新步骤指示器
                steps[1].classList.remove('step-active');
                
                cssApplied = false;
            }
        });
    </script>
</body>
</html>